import React, { memo, useEffect, useState } from "react";
import ArtistLeft from "@/components/artistComponent/artistLeft";
import ArtistRight from "@/components/artistComponent/artistRight";
import { artistCategories } from "@/services/local-data";
import { ArtistWrap } from "./style";

export default memo(function Artist(props) {
  const [name, setName] = useState();

  useEffect(() => {
    getName();
  }, [props]); // eslint-disable-line react-hooks/exhaustive-deps

  const initial =
    props.location.search.split(/\?\S*?=/)[4] + "" === "undefined"
      ? -1
      : props.location.search.split(/\?\S*?=/)[4];
  const locationArea =
    props.location.search.split(/\?\S*?=/)[3] + "" === "undefined"
      ? 7
      : props.location.search.split(/\?\S*?=/)[3];
  const locationType =
    props.location.search.split(/\?\S*?=/)[2] + "" === "undefined"
      ? 1
      : props.location.search.split(/\?\S*?=/)[2];
  const locationUrl =
    props.location.search.split(/\?\S*?=/)[1] + "" === "undefined"
      ? 1001
      : props.location.search.split(/\?\S*?=/)[1];

  const getName = () => {
    for (let prop in artistCategories) {
      if (artistCategories[prop].area == locationArea) {
        for (let name in artistCategories[prop].artists) {
          if (artistCategories[prop].artists[name].type == locationType) {
            setName(artistCategories[prop].artists[name].name);
          }
        }
      }
    }
  };

  return (
    <ArtistWrap>
      <div className="flx wrap-v2">
        <ArtistLeft location={props.location} />
        <ArtistRight
          initial={initial}
          url={locationUrl}
          name={name}
          area={locationArea}
          type={locationType}
        />
      </div>
    </ArtistWrap>
  );
});
